<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>消息中心</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background-color: #fff9e6;
        }
        
        .message-list {
            background: white;
            border-radius: 8px;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        
        .message-item {
            padding: 15px;
            border-bottom: 1px solid #eee;
            display: flex;
            align-items: center;
            cursor: pointer;
        }
        
        .message-item:hover {
            background: #fffbf0;
        }
        
        .message-item:last-child {
            border-bottom: none;
        }
        
        .avatar {
            width: 50px;
            height: 50px;
            border-radius: 50%;
            margin-right: 15px;
        }
        
        .message-content {
            flex: 1;
        }
        
        .message-header {
            display: flex;
            justify-content: space-between;
            margin-bottom: 5px;
        }
        
        .username {
            font-weight: bold;
            color: #5c3c10;
        }
        
        .time {
            color: #999;
            font-size: 12px;
        }
        
        .message-text {
            color: #666;
            font-size: 14px;
        }
        
        .unread {
            background-color: #fff3cd;
        }
        
        .unread-dot {
            width: 8px;
            height: 8px;
            background: #ff6b6b;
            border-radius: 50%;
            margin-left: 5px;
            display: inline-block;
        }
        
        .empty-state {
            text-align: center;
            padding: 40px;
            color: #666;
        }
    </style>
</head>
<body>
    <div class="message-list" id="messageContainer">
        <!-- 消息列表将通过 JavaScript 动态加载 -->
    </div>

    <script>
    $(document).ready(function() {
        loadMessages();
    });

    function loadMessages() {
        $.ajax({
            url: '/message/list',
            type: 'GET',
            success: function(response) {
                if (response.code === 200) {
                    displayMessages(response.data);
                } else {
                    showEmptyState('加载失败：' + response.message);
                }
            },
            error: function() {
                showEmptyState('加载失败，请稍后重试');
            }
        });
    }

    function displayMessages(messages) {
        const container = $('#messageContainer');
        container.empty();
        
        if (!messages || messages.length === 0) {
            showEmptyState('暂无消息');
            return;
        }
        
        messages.forEach(message => {
            const messageHtml = `
                <div class="message-item ${message.unread ? 'unread' : ''}" 
                     onclick="openChat(${message.senderId})">
                    <img src="${message.avatar || 'img/default-avatar.png'}" class="avatar" alt="头像">
                    <div class="message-content">
                        <div class="message-header">
                            <span class="username">
                                ${message.senderName}
                                ${message.unread ? '<span class="unread-dot"></span>' : ''}
                            </span>
                            <span class="time">${formatTime(message.sendTime)}</span>
                        </div>
                        <div class="message-text">${message.content}</div>
                    </div>
                </div>
            `;
            container.append(messageHtml);
        });
    }

    function showEmptyState(message) {
        $('#messageContainer').html(`
            <div class="empty-state">
                <p>${message}</p>
            </div>
        `);
    }

    function formatTime(timestamp) {
        const date = new Date(timestamp);
        const now = new Date();
        const diff = now - date;
        
        if (diff < 60000) { // 小于1分钟
            return '刚刚';
        } else if (diff < 3600000) { // 小于1小时
            return Math.floor(diff / 60000) + '分钟前';
        } else if (diff < 86400000) { // 小于24小时
            return Math.floor(diff / 3600000) + '小时前';
        } else {
            return `${date.getMonth() + 1}月${date.getDate()}日`;
        }
    }

    function openChat(userId) {
        location.href = `chat.html?userId=${userId}`;
    }
    </script>
</body>
</html> 